脚手架篇基础模板|Node Devops专题 | 前端进阶之旅

# 前言

上一章是一个基础的 CLI 工具的构建，但开发者平常最多的还是在开发业务代码，仅仅依靠 CLI 从 devops 末端去约束是远远不够的，所以一般的小团队也会从脚手架入手。

本章将以 React 为例定制一套自定义脚手架以及对之前的 CLI 进行升级。

# 自定义 React 脚手架

脚手架设计一般分为两块，一块是基础架构，一块是业务架构。

基础架构决定脚手架的技术选型、构建工具选型以及开发优化、构建优化、环境配置、代码约束、提交规范等。

业务架构则是针对业务模块划分、请求封装、权限设计等等于与业务耦合度更高的模块设计。

# 搭建基础架构

跟 CLI 一样都是从 0 搭建这个脚手架，所以起手还是初始化项目与 ts 配置。

npm init
tsx --init

@前端进阶之旅: 代码已经复制到剪贴板

如上先将 package.josn 与 tsconfig.json 生成出来，tsconfig.json 的配置项可以直接使用下面的配置或者根据自己需求重新定义。

{
  "include": [
    "src"
  ],
  "compilerOptions": {
    "module": "CommonJS",
    "target": "es2018",
    "outDir": "dist",
    "noEmit": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "strict": true,
    "noUnusedLocals": false,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": "./",
    "keyofStringsOnly": true,
    "skipLibCheck": true,
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}